<template>
  <div class="icon-select-container relative" :style="{ width }" id='icon-select-container'>
    <el-input
      v-if="type === 'input'"
      v-model="selectValue"
      placeholder="点击选择图标"
      v-click-outside="clickOutside"
      readonly
      ref="selectRef"
    >
      <template #prepend>
        <svg-icon :name="selectValue" />
      </template>
    </el-input>
    <el-button v-else v-click-outside="clickOutside" ref="selectRef">
      <svg-icon :name="selectValue" />
      <span class="ml-4px">{{ selectValue || "点击选择图标" }}</span>
    </el-button>
    <el-popover
      shadow="none"
      ref="popoverRef"
      :virtual-ref="selectRef"
      virtual-triggering
      placement="bottom-end"
      trigger="click"
      :teleported="false"
      :width="width"
    >
      <el-input v-model="searchValue" placeholder="输入名称搜索图标" />
      <el-divider border-style="dashed" />
      <el-scrollbar :height="scrollbarHeight">
        <ul class="icon-list">
          <template v-for="icon in filterIcons" :key="icon">
            <el-tooltip effect="dark" :content="icon" placement="top">
              <li class="icon-item" @click="selectIcon(icon)">
                <svg-icon :name="icon" />
              </li>
            </el-tooltip>
          </template>
        </ul>
      </el-scrollbar>
    </el-popover>
  </div>
</template>

<script setup >
import {
  ref,
  defineOptions,
  defineEmits,
  unref,
  defineProps,
  computed,
} from "vue";
import { ClickOutside as vClickOutside } from "element-plus";
import { menuIcons } from "@/components/icons/SelectIcon/menuIcons";

import { useVModel } from "@vueuse/core";

defineOptions({
  name: "iconSelect",
});
const props = defineProps({
  modelValue: String,
  type: {
    type: String,
    default: () => {
      return "input";
    },
  },
  width: {
    type: String,
    default: () => {
      return "100%";
    },
  },
  scrollbarHeight: {
    type: String,
    default: () => {
      return "200px";
    },
  },
});

// );
const emit = defineEmits(["update:modelValue"]);

const selectValue = useVModel(props, "modelValue", emit);
const selectRef = ref();
const searchValue = ref("");
const popoverRef = ref();

// 点击其它区域隐藏 popover 弹窗
function clickOutside() {
  unref(popoverRef).popperRef?.delayHide?.();
}

const filterIcons = computed(() =>
  menuIcons.filter((item) => item.includes(searchValue.value))
);
// 选则图标
function selectIcon(icon) {
  selectValue.value = icon;
  popoverRef.value?.hide();
  searchValue.value = "";
}
</script>
<style lang="less">
#icon-select-container{
    .el-divider--horizontal{
        margin:5px 0;
        border-top:0;
    }
}
</style>
<style lang="less" scoped>
::v-deep  {
  .svg-icon {
    width: 25px;
    height: 25px;
  }
}

.icon-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;

  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    border: 1px solid #ccc;
    width: 25px;
    height: 25px;
    margin-left: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    &:hover {
      color: var(--el-color-primary);
      border-color: var(--el-color-primary);
      transition: all 0.2s;
      transform: scaleX(1.1);
    }
  }
}
</style>